<!DOCTYPE html>
<html>
<!-- 实现手指弯曲 计数 -->
<head>
    <meta charset="utf-8">
    
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/control_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/drawing_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/holistic.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <video class="input_video"></video>
        <canvas class="output_canvas" width="1280px" height="720px"></canvas>
    </div>

    <script type="module">
        const videoElement = document.getElementsByClassName('input_video')[0];
        const canvasElement = document.getElementsByClassName('output_canvas')[0];
        const canvasCtx = canvasElement.getContext('2d');

        let count = 0
        let start = false
        let end =false

        function countAngle(point1,point2,point3){
            // 1.先求 point1 和point2之间的距离
            let temp12  =  Math.pow((point1[0]-point2[0]),2)+  Math.pow((point1[1]-point2[1]),2) +Math.pow((point1[2]-point2[2]),2)
            let point12 = Math.pow(temp12,0.5)
            // console.log(point12)
            let temp23  =  Math.pow((point3[0]-point2[0]),2)+  Math.pow((point3[1]-point2[1]),2) +Math.pow((point3[2]-point2[2]),2)
            let point23 = Math.pow(temp23,0.5)

            // 2.求向量 
            let vector12 = [(point1[0]-point2[0]),(point1[1]-point2[1]),(point1[2]-point2[2])]
            let vector23 = [(point3[0]-point2[0]),(point3[1]-point2[1]),(point3[2]-point2[2])]
            
            
            //3.求arccos 
            let top = vector12[0] * vector23[0] + vector12[1] * vector23[1] + vector12[2] * vector23[2]
            let bottom = point12 * point23

            // 4.最后求解
            console.log(Math.acos(top / bottom)* 180 / Math.PI)
            return Math.acos(top / bottom)* 180 / Math.PI
        }
        function onResults(results) {
            
            canvasCtx.save();
            canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
            canvasCtx.drawImage(results.segmentationMask, 0, 0,
                canvasElement.width, canvasElement.height);

            // 覆盖全身的像素
            //   canvasCtx.globalCompositeOperation = 'source-in';

            //   全身变绿
            //   canvasCtx.fillStyle = '#00FF00';
            //   canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);

            // 覆盖丢失的像素
            //   canvasCtx.globalCompositeOperation = 'destination-atop';
            canvasCtx.drawImage(
                results.image, 0, 0, canvasElement.width, canvasElement.height);


            canvasCtx.globalCompositeOperation = 'source-over';

          
            
            //   姿势
            drawConnectors(canvasCtx, results.poseLandmarks, POSE_CONNECTIONS,
                { color: '#00FF00', lineWidth: 4 });
            drawLandmarks(canvasCtx, results.poseLandmarks,
                { color: '#FF0000', lineWidth: 2 });
            
            
            
                // 脸谱
            drawConnectors(canvasCtx, results.faceLandmarks, FACEMESH_TESSELATION,
                { color: '#C0C0C070', lineWidth: 1 });
            drawConnectors(canvasCtx, results.faceLandmarks, FACEMESH_TESSELATION,
                { color: '#CC0000', lineWidth: 5 });

            try{

                // 重要深蹲 逻辑
                let point1 = [results.leftHandLandmarks[8].x,results.leftHandLandmarks[8].y,results.leftHandLandmarks[8].z]
                let point2 = [results.leftHandLandmarks[6].x,results.leftHandLandmarks[6].y,results.leftHandLandmarks[6].z]
                let point3 = [results.leftHandLandmarks[5].x,results.leftHandLandmarks[5].y,results.leftHandLandmarks[5].z]
                console.log(results.leftHandLandmarks,countAngle(point1,point2,point3))
                
                
                if(countAngle(point1,point2,point3)>160){
                    if(start==true){
                        start = false
                        count++
                        alert(count)
                    }
                    
                }else{
                    start = true
                }


                
            } 
            catch(e){
                // console.log(e)
            }
            
            drawConnectors(canvasCtx, results.leftHandLandmarks, HAND_CONNECTIONS,
                { color: '#CC0000', lineWidth: 5 });
            drawLandmarks(canvasCtx, results.leftHandLandmarks,
                { color: '#00FF00', lineWidth: 2 });

            drawConnectors(canvasCtx, results.rightHandLandmarks, HAND_CONNECTIONS,
                { color: '#00CC00', lineWidth: 5 });
            // 关键点
            drawLandmarks(canvasCtx, results.rightHandLandmarks,
                { color: '#FF0000', lineWidth: 2 });
            canvasCtx.restore();
        }

        const holistic = new Holistic({
            locateFile: (file) => {
                console.log(file,"file")
                return `https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/locate/${file}`;
            }
        });
        holistic.setOptions({
            modelComplexity: 1,
            smoothLandmarks: true,
            enableSegmentation: true,
            smoothSegmentation: true,
            refineFaceLandmarks: true,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
        holistic.onResults(onResults);

        const camera = new Camera(videoElement, {
            onFrame: async () => {
                await holistic.send({ image: videoElement });
            },
            width: 1280,
            height: 720
        });

        // const stream = await navigator.mediaDevices.getUserMedia({ video: {} })
        // videoElement.srcObject = stream
        camera.start();
    </script>

</body>

</html>